Adding a Checkbox Component

This tutorial walks through creating a complete Checkbox component for the Example Component Library. We'll build the component step-by-step across all scopes: common, designer, gateway, and web.

Component Overview

The Checkbox component we'll create will have these features:

• Toggle-able checked state
• Label text
• Disabled state
• Custom styling support
• Change event handler

Tutorial Structure

1. Common Scope

   • Component descriptor
   • Property schemas
   • Event definitions
   • Constants and utilities

2. Designer Scope

   • Component registration
   • Component icons

3. Gateway Scope

   • Component registration
   • Event handling
   • Resource management

4. Web Scope

   • React component
   • TypeScript definitions
   • Styling
   • Event handling

5. Practice Exercises

   • Enhance the Checkbox component with additional features
   • Create related components
   • Tips and hints for expanding your skills